<template>
	<view>
		<!-- 排行榜 -->
		<view v-if="isShow" class="common-card p_4 scroll-x-box" v-for="(itemList,indexList) in topList" >
			<view class="m_b_25">
				<view class="title pt_1">音乐{{itemList.name}} {{indexList}}<span class="title_1 ml_3">{{substring(itemList.name)}}</span></view>
			</view>
			<view class="content" v-if="allList">
				<scroll-view :scroll-x="true" class="scroll-X">
					<view class="poster-list-item" v-for="(item,index) in allList[indexList]" :key="item.id" @tap="goPlayMusic(item)">
						<view class="image-box">
							<u-image width="200rpx" height="200rpx" border-radius="10" :src="item.al.picUrl"></u-image>
							<view class="dt-count">
								{{formatNumber(item.dt)}}
							</view>
						</view>
						<view class="song-name u-line-1">{{item.name}}</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 所以榜单
				topList:[],
				allList:[],
				isShow: false
			}
		},
		created() {
			this.initList(5)
		},
		methods: {
			async initList(number){
				uni.showLoading({
					title: "玩命加载中...."
				})
				// 所有榜单 获取id 
				let _topList = await this.$api.toplist()
				_topList = _topList.list.slice(0,number || 8)
				this.topList = _topList
				console.log("_topList",_topList)
				
				let length = number || _topList.length
				for(let i=0; i<length; i++){
					if(_topList[i]){
						let _allList = await this.$api.playlistDetail({data:{id:_topList[i].id}})
						this.allList[i] = _allList.playlist.tracks.slice(0,8)
					}
				}
				console.log("this.allList",this.allList)
				uni.hideLoading()
				this.isShow = true
				
			},
			substring(str){
				str = str.substring(0,str.length - 1);
				return str
			},
			// 去到对应的歌单 待完善
			goPlaylistPage(id) {
				console.log("去到对应的歌单 待完善  点击的ID为："+id)
			},
			// 播放音乐
			goPlayMusic(item){
				let params = {
					id: item.id,
					name: item.name,
					picUrl : item.al ? item.al.picUrl : ''
				};
				this.playMusic(params);
			},
		}
	}
</script>

<style>
	.common-card .title{
		font-size: 32rpx;
		font-weight: bolder;
	}
	.common-card .title_1{
		font-size: 20rpx;
		color: #808080;
		vertical-align: super;
	}
	.common-card{
		background-color: #FFFFFF;
		margin-top: 30rpx;
	}
	/* 横向滚动 */
	.scroll-x-box{
	}
	.scroll-x-box .scroll-X{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	.scroll-x-box .scroll-X .poster-list-item{
		width: 200rpx;
		display: inline-block;
		margin-right: 30rpx;
	}
	.scroll-x-box .scroll-X .poster-list-item .image-box{
		width: 200rpx;
		position: relative;
	}
	.scroll-x-box .scroll-X .poster-list-item .image-box .dt-count{
		position: absolute;
		top: 0;
		right: 0;
		color: #FFFFFF;
		background-color: rgba(0,0,0,.1);
		border-radius: 10rpx;
		padding: 0 5rpx;
		font-size: 26rpx;
	}
	.scroll-x-box .scroll-X .poster-list-item .song-name{
		height: auto;
		color: #333;
		margin-top: 8rpx;
		font-size: 26rpx;
		word-wrap : break-word ;
		word-break: normal;
	}
</style>
